<template>
  <div>
    <div class="gird">
      <div class="sudoku_row">
        <div
          class="sudoku_item"
          :class="curSelect == sudoku.id ? 'opacity' : ''"
          v-for="(sudoku, index) in sudokus"
          :key="index"
          @touchstart="touchstart(index)"
          @touchend="touchend"
          
        >
          <img :src="sudoku.img" width="40" height="40" />
          <div class="sudoku_title">
            {{ sudoku.title }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>  
<script>
export default {
  name: "sudoku",
  data() {
    return {
      sudokus: [],
      curSelect: null,
    };
  },
  components: {},
  methods: {
    touchstart: function (e) {
      var that = this;
      var list = that.sudokus;
      for (var i = 0, len = list.length; i < len; ++i) {
        if (list[i].id == e) {
          that.curSelect = i;
        }
      }
    },
    touchend: function () {
      var that = this;
      that.curSelect = null;
    },
    Onclick(id) {
      if (id == 0) {
        this.$router.push({
          path: "/sign",
        });
      } else if (id == 1) {
        this.$router.push({
          path: "/gift",
        });
      } else if (id == 2) {
        this.$router.push({
          path: "/bargain",
        });
      } else if (id == 3) {
        this.$router.push({
          path: "/special",
        });
      }
    },
  },
  created() {
    this.$axios.get("http://localhost:8080/navigation.json").then((res) => {
      this.sudokus = res.data.data.user;
      // console.log(res.data.data.user);
    });
  },
};
</script>  
<style >
.sudoku_row {
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}
.sudoku_item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 25%;
  padding-top: 10px;
  padding-bottom: 10px;
}
.opacity {
  opacity: 0.4;
  background: #e5e5e5;
}
.sudoku_item img {
  margin-bottom: 3px;
  display: block;
}
.gird {
  width: 100%;
  height: 5rem;
  position: absolute;
  top: 16rem;
  left: 0rem;
  background-color: rgb(255, 255, 255);
  border-radius: 1rem 1rem 0rem 0rem;
}
.sudoku_title {
  font-size: 1rem;
}
</style>  